<template>
  <div class="manage-Group">
    <div class="addUser">
      <el-button type='primary'
                 @click="GroupState=0,GroupVisible=true">添加管理组</el-button>
    </div>
    <el-table :data="Group"
              style="width: 100%">
      <el-table-column prop="rname"
                       label="管理组名称"
                       align="center">
      </el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="small"
                     @click="GroupState=1,GroupVisible=true,form = Object.assign({},scope.row)">编辑</el-button>
          <el-button type="success"
                     size="small"
                     @click="authVisible=true,rid=scope.row.rid,auth(scope.row.rid)">分配权限</el-button>
          <el-button type="danger"
                     size="small"
                     @click="remove(scope.row.rid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <el-dialog title="分配权限"
                 :visible.sync="authVisible"
                 width="30%"
                 center
                 @closed='closeDialog()'>
        <div>
          <el-tree :data="Routers"
                   show-checkbox
                   ref="tree"
                   node-key="id">
            <span class="custom-tree-node"
                  slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
            </span>
          </el-tree>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="authVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="distribution()">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template>
      <el-dialog :title="GroupState ? '修改' : '添加'"
                 :visible.sync="GroupVisible"
                 width="30%"
                 center
                 @closed="Object.keys(form).forEach(key => form[key] = '')">
        <div>
          <el-form ref="form"
                   :model="form"
                   label-width="100px">
            <el-form-item label="管理组名称:"
                          prop="rname">
              <el-input v-model="form.rname"
                        placeholder="请输入管理组名称"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="GroupVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="GroupState ? modify() : add()">{{GroupState ? '修改' : '添加'}}</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import permission from '@/directive/permission/index.js' // 权限判断指令
export default {
  directives: { permission },
  data () {
    return {
      Group: [],  //管理组
      checked: [], //分配权限
      authVisible: false, //分配权限对话框,显示状态
      GroupState: 0, //管理组状态 0 添加管理组 1 修改管理组
      GroupVisible: false, //添加/修改 对话框显示状态
      rid: '', //管理组id
      form: {
        rname: ''
      }
    }
  },
  computed: {
    ...mapGetters(['Routers']),
  },
  methods: {
    async init () {  //获取管理组数据
      try {
        const res = await this.api.groupList()
        this.Group = res.data
      } catch (err) {
        console.log(err)
      }
    },
    async auth (rid) {  //获取tree默认选中的id
      try {
        const res = await this.api.permissionDisplay({ rid: rid })
        if (res.code == 1) {
          this.defaultChecked(res.data)
        }

      } catch (err) {
        console.log(err)
      }
    },

    defaultChecked (checked) { //设置tree默认选中状态
      if (checked && checked.length > 0) {
        checked.forEach(item => {
          this.$refs.tree.setChecked(item, true)
        });
      }
    },
    async distribution () {   //分配权限

      try {
        const checkedID = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]  //tree被选中id
        const res = await this.api.assignAuthority({ rid: this.rid, auth: checkedID })  // rid 管理组id auth 被选中权限id
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.authVisible = false
          this.init()
          this.$store.dispatch('ChangeRoles', this.$store.getters.roles)
        } else {
          this.$message.error(res.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    async add () {  //添加管理组   @param  form->rname 管理组名称
      try {
        const res = await this.api.addRole(this.form)
        if (res.code == 1) {
          this.GroupVisible = false
          this.$message({ message: res.msg, type: 'success' })
          this.init()
          this.$store.dispatch('ChangeRoles', this.$store.getters.roles)
        } else {
          this.$message.error(res.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    async modify () {  //修改管理组名称 @param  form->rname 管理组名称 rid 管理组rid
      try {
        const res = await this.api.updateRole(this.form)
        if (res.code == 1) {
          this.GroupVisible = false
          this.$message({ message: res.msg, type: 'success' })
          this.init()
          this.$store.dispatch('ChangeRoles', res.data.roles)
        } else {
          this.$message.error(res.msg)
        }
      } catch (err) {
        console.log(err)
      }
    },
    remove (rid) {  //删除管理组 @param rid 管理组id
      this.$confirm('此操作将永久删除改管理组, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => {
        const res = await this.api.roleDel({ rid: rid })
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.init()
          this.$store.dispatch('ChangeRoles', this.$store.getters.roles)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { })
    },

    closeDialog () {  //关闭对话框情况原始的数据
      this.$refs.tree.setCheckedKeys([]);
    },
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.manage-Group {
  .addUser {
    text-align: right;
    padding: 15px 10px;
    margin: 10px 0;
    background-color: white;
  }
}
</style>
